<template>
  <div class="cashier-container">
    <div class="cart-container">
      <div class="title">
        <div class="logo">
          <img class="avatar" src="@/assets/images/avatar.png" />
        </div>
        <div class="member-info">
          <span class="name" v-if="memberInfo">
            {{ memberInfo.mobile }}
          </span>
          <span class="none" v-if="!memberInfo">当前为游客</span>
        </div>
      </div>
      <div class="carts">
        <div>
          <div class="tab">
            <div class="cart-list" v-if="cartList.length > 0">
              <div
                class="cart-item"
                v-for="cartInfo in cartList"
                :key="cartInfo.cartId"
              >
                <img class="image" :src="cartInfo.picUrl" />
                <div class="info">
                  <div class="name">{{ cartInfo.goodsName }}</div>
                  <div class="spec" v-if="cartInfo.goodsSpecificationValues">
                    <span
                      class="item"
                      :title="cartInfo.goodsSpecificationValues"
                    >
                      {{ cartInfo.goodsSpecificationValues }}
                    </span>
                  </div>
                  <div class="num">
                    <el-input-number
                      class="input"
                      @change="changeBuyNum(cartInfo)"
                      v-model="cartInfo.number"
                      :min="1"
                      :max="1000"
                    />
                  </div>
                </div>
                <div class="option">
                  <div
                    class="remove el-icon-delete"
                    @click="removeFromCart(cartInfo)"
                  ></div>
                  <div class="total">
                    ￥{{ (cartInfo.price * cartInfo.number).toFixed(2) }}
                  </div>
                </div>
              </div>
            </div>
            <div class="empty" v-if="cartList.length < 1">
              <el-empty description="暂无结算商品" :image-size="40"> </el-empty>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="number">
          <div class="total-num">
            总件数：<b class="num">{{ cartTotalNum }}</b>
          </div>
          <div class="total-price">
            总金额：<b class="num"
              >￥{{ cartTotalPrice ? cartTotalPrice.toFixed(2) : "0.00" }}</b
            >
          </div>
        </div>
        <div class="options">
          <div class="submit" v-if="cartTotalNum > 0" @click="doSettlement()">
            提交结算
          </div>
          <div class="submit" v-if="cartTotalNum == 0" @click="doCashier()">
            无商品收款
          </div>
        </div>
      </div>
    </div>
    <div class="main-list">
      <div class="title">
        <el-form
          class="search-form"
          ref="searchForm"
          :inline="true"
          :model="searchForm"
        >
          <el-form-item class="form-item" label="" prop="keyword">
            <el-input
              v-model="searchForm.keyword"
              prefix-icon="el-icon-full-screen"
              @keyup.enter.native="doQueryGoods"
              class="input-item"
              placeholder="请输入商品关键字：商品名称、条码、商品ID..."
              clearable
              maxlength="100"
            />
          </el-form-item>
          <el-button
            class="search-goods"
            @click="doQueryGoods()"
            icon="el-icon-search"
            >查询商品
          </el-button>
          <el-button
            v-if="!memberInfo"
            class="switch"
            type="danger"
            icon="el-icon-refresh"
            @click="switchMember('switch')"
          >
            关联会员
          </el-button>
          <el-button
            v-if="memberInfo"
            class="switch"
            type="danger"
            icon="el-icon-refresh"
            @click="doSwitchMember(null)"
          >
            切换为游客
          </el-button>
          <el-button
            class="switch"
            type="danger"
            icon="el-icon-refresh"
            @click="switchMember('add')"
          >
            添加会员
          </el-button>
          <el-form-item class="setting">
            <span
              :class="goodsMode == 'small' ? 'item active' : 'item'"
              @click="switchGoodMode('small')"
            >
              <svg
                t="1741317847001"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6842"
                width="16"
                height="16"
              >
                <path
                  d="M263.104 760.896V960H64v-199.104h199.104z m348.48 0V960H412.416v-199.104h199.168z m348.416 0V960h-199.104v-199.104H960zM263.104 412.416v199.168H64V412.416h199.104z m348.48 0v199.168H412.416V412.416h199.168z m348.416 0v199.168h-199.104V412.416H960zM263.104 64v199.104H64V64h199.104z m348.48 0v199.104H412.416V64h199.168zM960 64v199.104h-199.104V64H960z"
                  p-id="6843"
                ></path>
              </svg>
              <span class="text">小图</span>
            </span>
            <span
              :class="goodsMode == 'big' ? 'item active' : 'item'"
              @click="switchGoodMode('big')"
            >
              <svg
                t="1741318028632"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2278"
                width="16"
                height="16"
              >
                <path
                  d="M934.4 934.4V633.6H633.6v300.8h300.8m-544 0V633.6H89.6v300.8h300.8m544-544V89.6H633.6v300.8h300.8m-544 0V89.6H89.6v300.8h300.8M960 1024H608a64 64 0 0 1-64-64V608a64 64 0 0 1 64-64H960a64 64 0 0 1 64 64V960a64 64 0 0 1-64 64z m-544 0H64a64 64 0 0 1-64-64V608a64 64 0 0 1 64-64h352a64 64 0 0 1 64 64V960a64 64 0 0 1-64 64zM960 480H608a64 64 0 0 1-64-64V64a64 64 0 0 1 64-64H960a64 64 0 0 1 64 64v352a64 64 0 0 1-64 64z m-544 0H64a64 64 0 0 1-64-64V64a64 64 0 0 1 64-64h352a64 64 0 0 1 64 64v352a64 64 0 0 1-64 64z"
                  fill="#333333"
                  p-id="2279"
                ></path>
              </svg>
              <span class="text">大图</span>
            </span>
          </el-form-item>
        </el-form>
        <el-tabs
          class="tab-box"
          type="card"
          v-model="catalogTab"
          @tab-click="switchCatalog"
        >
          <el-tab-pane label="全部" name=""></el-tab-pane>
          <el-tab-pane
            v-for="catalog in catalogList"
            :label="catalog.name"
            :key="catalog.id + ''"
            :name="catalog.id + ''"
          ></el-tab-pane>
        </el-tabs>
      </div>
      <div :class="'goods-list ' + goodsMode">
        <div
          class="goods-item"
          v-for="goodsInfo in goodsList"
          :key="goodsInfo.id"
        >
          <div class="item" @click="clickGoods(goodsInfo)">
            <img class="image" lazy :src="goodsInfo.picUrl" />
            <div class="goods-name">{{ goodsInfo.name }}</div>
            <!-- 赠送 -->
            <div class="goods-price-list" v-if="goodsInfo.priceType == 1">
              <div class="red bold">
                <span>赠送</span>
              </div>
              <div class="gray">
                <span>售价：</span>
                <span class="line-through">￥{{ goodsInfo.retailPrice }}</span>
              </div>
            </div>
            <!-- 特价 -->
            <div class="goods-price-list" v-if="goodsInfo.priceType == 2">
              <div class="red bold">
                <span>特价：</span>
                <span>￥{{ goodsInfo.specialPrice }}</span>
              </div>
              <div class="gray">
                <span>售价：</span>
                <span class="line-through">￥{{ goodsInfo.retailPrice }}</span>
              </div>
            </div>
            <!-- 折扣 -->
            <div class="goods-price-list" v-if="goodsInfo.priceType == 3">
              <div class="red bold">
                <span>售价：</span>
                <span>￥{{ goodsInfo.retailPrice }}</span>
              </div>
              <div class="red bold">
                <span>{{ goodsInfo.priceLabel }}</span>
              </div>
            </div>
            <!-- 满减 -->
            <div class="goods-price-list" v-if="goodsInfo.priceType == 4">
              <div class="red bold">
                <span>售价：</span>
                <span>￥{{ goodsInfo.retailPrice }}</span>
              </div>
              <div class="red bold">
                <span>{{ goodsInfo.priceLabel }}</span>
              </div>
            </div>
            <!-- 无活动 -->
            <div class="goods-price-list" v-if="goodsInfo.priceType == 0">
              <div class="red bold">
                <span>售价：</span>
                <span class="bold">￥{{ goodsInfo.retailPrice }}</span>
              </div>
            </div>
          </div>
        </div>
        <pagination
          v-show="totalGoods > 0"
          :total="totalGoods"
          class="pagination"
          :page.sync="page"
          :limit.sync="pageSize"
          @pagination="initGoodsList"
        />

        <el-empty
          v-if="goodsList.length == 0"
          description="暂无商品..."
        ></el-empty>
      </div>
    </div>

    <!-- 规格详情 start-->
    <el-dialog
      title="选择商品规格"
      :visible.sync="openGoodsDialog"
      class="common-dialog"
      append-to-body
    >
      <div class="goods-info">
        <div class="name">{{ goodsInfo.name }}</div>
        <div class="price">￥{{ goodsInfo.retailPrice }}</div>
        <div class="num">
          <el-input-number
            class="input"
            v-model="goodsNum"
            :min="1"
            :max="1000"
          />
        </div>
        <div class="spec-list" v-if="goodsInfo.specList.length">
          <div
            class="spec-item"
            v-for="specInfo in goodsInfo.specList"
            :key="specInfo.name"
          >
            <div class="spec-name">{{ specInfo.name }}</div>
            <div class="values">
              <span
                v-for="child in specInfo.valueList"
                :key="child.id"
                :class="
                  specifications.includes(child.value)
                    ? 'value active'
                    : 'value'
                "
                @click="selectGoodsSpec(child.value)"
              >
                {{ child.value }}
              </span>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="main-button" @click="addToCart()">
          加入结算
        </el-button>
        <el-button @click="closeGoodsDialog()">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 规格详情 end-->

    <!--关联/添加会员对话框 start-->
    <switchMemberDialog
      :action-type="actionType"
      :show-dialog="openMemberDialog"
      @doSwitchMember="doSwitchMember"
    />
    <!--关联会员对话框 end-->

    <!--结算对话框 start-->
    <settlementDialog
      :show-dialog="openSettlementDialog"
      :memberInfo="memberInfo"
      :totalPrice="cartTotalPrice"
      :remarks="cartRemark"
      :orderInfo="orderInfo"
      @submit="submitSettlement"
      @switchMember="switchMember"
      @closeDialog="closeDialog"
    />
    <!--结算对话框 end-->

    <!--扫码付款对话框 start-->
    <!-- <scanPayCodeDialog
      ref="scanPayCodeDialog"
      :show-dialog="openScanPayCodeDialog"
      :memberInfo="memberInfo"
      :orderId="orderId"
      :payType="payType"
      :payAmount="payAmount"
      @closeDialog="closeDialog"
      @showPayResult="showPayResult"
    /> -->
    <!--扫码付款对话框 end-->

    <!--支付结果对话框 start-->
    <!-- <payResultDialog
      :show-dialog="openPayResultDialog"
      :payResult="payResult"
      @showOrderPrint="showOrderPrint"
      @closeDialog="closeDialog"
    /> -->
    <!--支付结果对话框 end-->

    <!--打印订单对话框 start-->
    <orderPrintDialog
      :show-dialog="openOrderPrintDialog"
      :storeName="storeName"
      :orderInfo="orderInfo"
      @closeDialog="closeDialog"
    />
    <!--打印订单对话框 end-->

    <!-- 无商品收款组件 start-->
    <noGoodsCashier
      :show-dialog="openNoGoodsCashierDialog"
      @submit="submitCashier"
      @closeDialog="closeDialog"
    >
    </noGoodsCashier>
    <!-- 无商品收款组件 end-->
  </div>
</template>

<script>
import { searchGoods, getMemberInfoById } from "@/api/cashier";
import { getOrderInfo, submitOrder } from "@/api/order";
import { getCatalogList } from "@/api/catalog";
import { getGoodsList, getGoodsDetail } from "@/api/goods";
import {
  getCartInfo,
  cartAdd,
  cartUpdate,
  cartDelete,
  updateCartVip,
} from "@/api/cart";
import { getUserId, setUserId, removeUserId } from "@/utils/auth";
import switchMemberDialog from "@/views/cashier/components/switchMemberDialog";
import settlementDialog from "@/views/cashier/components/settlementDialog";
import scanPayCodeDialog from "@/views/cashier/components/scanPayCodeDialog";
import payResultDialog from "@/views/cashier/components/payResultDialog";
import orderPrintDialog from "@/views/cashier/components/orderPrintDialog";
import variables from "@/assets/styles/variables.scss";
import noGoodsCashier from "@/views/cashier/components/noGoodsCashier";
export default {
  name: "Cashier",
  components: {
    switchMemberDialog,
    settlementDialog,
    scanPayCodeDialog,
    payResultDialog,
    orderPrintDialog,
    noGoodsCashier,
  },
  data() {
    return {
      // 系统名称
      systemName: process.env.VUE_APP_TITLE,
      // 导航tab
      catalogTab: "",
      isOpen: true,
      page: 1,
      pageSize: 15,
      totalGoods: 0,
      openGoodsDialog: false,
      openMemberDialog: false,
      openSettlementDialog: false,
      openNoGoodsCashierDialog: false,
      // openScanPayCodeDialog: false,
      // openPayResultDialog: false,
      openOrderPrintDialog: false,
      searchForm: { keyword: "" },
      payResult: { isSuccess: false, payAmount: 0, orderId: 0 },
      goodsForm: {},
      // 分类类目
      catalogList: [],
      // 当前操作会员
      memberInfo: { mobile: 12311112222, name: "HAHAHA" },
      actionType: "",
      // 当前登录用户
      accountName: this.$store.getters.name,
      // 当前门店信息
      storeName: this.$store.getters.storeName,
      // 当前操作商品
      goodsInfo: { num: 1, specList: [], productList: [] },
      // 当前选择属性
      specifications: [],
      // 商品数量
      goodsNum: 1,
      // 当前分类
      categoryId: "",
      // 商品分类列表
      cateList: [],
      // 商品列表
      goodsList: [],
      // 购物车列表
      cartList: [],
      // 总金额
      cartTotalPrice: 0,
      // 购物车备注
      cartRemark: "",
      // 总件数
      cartTotalNum: 0,
      // 支付金额
      payAmount: 0,
      // 当前订单号
      orderId: 0,
      // 支付方式
      payType: "",
      // 当前订单
      orderInfo: {},
      isSearch: false,
      // 商品模式
      goodsMode: this.$cache.local.get("goodsMode")
        ? this.$cache.local.get("goodsMode")
        : "small",
    };
  },
  mounted() {
    const app = this;
    // 监听扫码枪按键
    let code = "";
    let lastTime, nextTime; // 上次时间、最新时间
    let lastCode, nextCode; // 上次按键、最新按键
    document.onkeypress = (e) => {
      // 获取按键
      if (window.event) {
        // IE
        nextCode = e.keyCode;
      } else if (e.which) {
        // Netscape/Firefox/Opera
        nextCode = e.which;
      }
      // 如果触发了回车事件(扫码结束时间)
      if (nextCode === 13) {
        if (code.length < 3) {
          return;
        }
        // if (app.openScanPayCodeDialog == true) {
        //   app.$refs.scanPayCodeDialog.submit(code);
        //   return false;
        // }
        if (app.openMemberDialog == true) {
          return false;
        }
        if (app.openSettlementDialog == true) {
          app.$alert("请点击确定收款！");
          return false;
        }
        app.addToCart1(code);
        code = "";
        lastCode = "";
        lastTime = "";
        return true;
      }
      nextTime = new Date().getTime(); // 记录最新时间
      if (!lastTime && !lastCode) {
        // 如果上次时间和上次按键为空
        code += e.key; // 执行叠加操作
      }
      // 如果有上次时间及上次按键
      if (lastCode && lastTime && nextTime - lastTime > 30) {
        code = e.key;
      } else if (lastCode && lastTime) {
        code += e.key;
      }
      lastCode = nextCode;
      lastTime = nextTime;
      return true;
    };
  },
  created() {
    this.initCatalog();
    this.initGoodsList();
    this.getCartList();
  },
  methods: {
    // 初始化分类
    initCatalog() {
      const app = this;
      getCatalogList().then((response) => {
        app.catalogList = response.data?.categoryList || [];
      });
    },
    // 初始化商品列表
    initGoodsList(option) {
      const app = this;
      if (option && option.limit) {
        app.pageSize = option.limit;
      }
      getGoodsList({
        brandId: app.$store.getters.storeId,
        categoryId: app.categoryId,
        page: app.page,
        size: app.pageSize,
      })
        .then((response) => {
          app.goodsList = response.data?.goodsList || [];
          app.totalGoods = response.data?.count || 0;
          app.loading = false;
        })
        .catch((err) => {
          app.loading = false;
          console.log(err.toString());
        });
    },

    // tab切换
    switchCatalog(el) {
      this.catalogTab = el.name;
      this.filterCate(this.catalogTab);
    },
    // 过滤分类商品
    filterCate(categoryId) {
      this.categoryId = categoryId;
      this.initGoodsList();
    },
    // 购物车信息
    getCartList() {
      const app = this;
      if (app.loading) {
        return false;
      }
      app.loading = true;
      app.cartList = [];
      getCartInfo({
        userId: this.$store.getters.userId || 5,
      })
        .then((response) => {
          response.data.brandCartGoods.forEach((brandCarts) => {
            brandCarts.cartList.forEach((cartInfo) => {
              app.cartList.push({
                cartId: cartInfo.id,
                productId: cartInfo.productId,
                goodsId: cartInfo.goodsId,
                goodsName: cartInfo.goodsName,
                goodsSn: cartInfo.goodsSn,
                number: cartInfo.number,
                picUrl: cartInfo.picUrl,
                price: cartInfo.price,
                specifications: cartInfo.specifications.join("-"),
              });
            });
          });
          app.cartTotalPrice = response.data.cartTotal.goodsAmount;
          app.cartTotalNum = response.data.cartTotal.goodsCount;
          app.loading = false;
        })
        .catch((err) => {
          app.loading = false;
          console.log(err.toString());
        });
    },
    // 查询商品
    doQueryGoods() {
      const app = this;
      if (!app.searchForm.keyword) {
        app.initGoodsList();
        return false;
      }
      app.loading = true;
      searchGoods({ keyword: app.searchForm.keyword })
        .then((response) => {
          app.loading = false;
          if (response.data && response.data.length > 0) {
            app.goodsList = response.data;
          } else {
            app.$alert("抱歉，未查询到商品信息！");
            return false;
          }
        })
        .catch((err) => {
          app.loading = false;
          console.log(err.toString());
        });
    },
    // 点击商品规格弹框
    clickGoods(goodsInfo) {
      console.log(333);
      if (this.loading) {
        return false;
      }
      this.loading = true;
      console.log(111);
      getGoodsDetail({
        id: goodsInfo.id,
        seckillId: 0,
      })
        .then((response) => {
          console.log(2222, response.data);
          this.goodsInfo = response.data.info;
          this.goodsInfo = this.goodsInfo.map((info) => {
            info.priceType = 0;
            if (info.giveAway) {
              info.priceType = 1; // 赠送
              info.priceLabel = "赠送";
            } else if (info.specialPrice) {
              info.priceType = 2; // 特价
            } else if (info.discountRate) {
              info.priceType = 3; // 折扣
              let discountRate;
              if ((info.discountRate * 100) % 10) {
                discountRate = info.discountRate * 100;
              } else {
                discountRate = info.discountRate * 10;
              }
              info.priceLabel = "再打" + discountRate + "折";
            } else if (info.min && info.reductionPrice) {
              info.priceType = 4; // 满减
              info.priceLabel = "满" + info.min + "减" + info.reductionPrice;
            }
            return info;
          });
          console.log(555);
          this.goodsInfo.specList = response.data.specificationList;
          this.goodsInfo.productList = response.data.productList || [];
          console.log(6666);
          this.goodsNum = 1;
          this.loading = false;
          if (this.goodsInfo.productList.length < 2) {
            console.log(7777);
            this.addToCart(false);
          } else {
            console.log(8888);
            this.openGoodsDialog = true;
          }
        })
        .catch((err) => {
          this.loading = false;
          console.log(err.toString());
        });
    },
    // 关闭规格弹框
    closeGoodsDialog() {
      this.openGoodsDialog = false;
    },
    // 选择商品属性
    selectGoodsSpec(specValue) {
      const app = this;
      let specValues = [];
      app.goodsInfo.specList.forEach(function () {
        specValues.push(0);
      });
      app.goodsInfo.specList.forEach(function (specInfo, index) {
        const children = [];
        specInfo.valueList.forEach(function (child) {
          children.push(child.value);
        });
        if (children.includes(specValue)) {
          specValues[index] = specValue;
        } else {
          specValues[index] =
            app.specifications[index] == undefined
              ? 0
              : app.specifications[index];
        }
      });
      app.specifications = specValues;
    },
    // 扫码加入购物车
    addToCart1(skuNo) {
      const app = this;
      app.isSearch = false;
      // 扫码枪扫描商品条码，直接加入购物车
      searchGoods({ keyword: skuNo })
        .then((response) => {
          app.loading = false;
          if (response.data && response.data.length == 1) {
            app.clickGoods(response.data[0]);
            app.isSearch = true;
            return false;
          } else {
            app.$alert("抱歉，未查询到商品信息！");
            return false;
          }
        })
        .catch((err) => {
          app.loading = false;
          console.log(err.toString());
        });
    },
    // 加入购物车
    addToCart() {
      const app = this;
      if (app.loading || !app.goodsInfo.id || app.goodsNum <= 0) {
        return false;
      }
      let productId = 0;
      if (app.goodsInfo.productList.length === 1) {
        const [productInfo] = app.goodsInfo.productList;
        productId = productInfo.id;
      }
      console.log("app.goodsInfo.productList", app.goodsInfo.productList);
      console.log("app.specifications", app.specifications);
      app.goodsInfo.productList.forEach((productInfo) => {
        if (productInfo.specifications.join() === app.specifications.join()) {
          productId = productInfo.id;
        }
      });
      if (app.goodsInfo.productList.length && productId <= 0) {
        app.$alert("请先确认商品规格！");
        return false;
      }
      // 添加到购物车
      const cartInfo = {
        brandId: app.$store.getters.storeId,
        goodsId: app.goodsInfo.id,
        productId: productId,
        number: app.goodsNum,
        userId: this.$store.getters.userId || 5,
      };
      app.loading = true;
      cartAdd(cartInfo)
        .then((response) => {
          app.loading = false;
          if (response.data) {
            app.getCartList();
            app.openGoodsDialog = false;
            app.specifications = [];
            app.goodsNum = 0;
          }
        })
        .catch((err) => {
          app.loading = false;
          console.log(err.toString());
        });
    },
    // 删除购物车的商品
    removeFromCart(cartInfo) {
      const app = this;
      cartDelete({
        productIds: [cartInfo.productId],
        // userId: this.$store.getters.userId || 5,
      })
        .then((response) => {
          if (response.data) {
            app.getCartList();
          }
        })
        .catch(() => {
          // empty
        });
    },
    // 购物车数量变化
    changeBuyNum(cartInfo) {
      const app = this;
      app.loading = true;
      cartUpdate({
        productId: cartInfo.productId,
        goodsId: cartInfo.goodsId,
        number: cartInfo.number,
        id: cartInfo.cartId,
      })
        .then((response) => {
          app.loading = false;
          if (response.data.cartId) {
            app.getCartList();
            app.openGoodsDialog = false;
            app.specifications = [];
          }
        })
        .catch(() => {
          app.loading = false;
          app.getCartList();
        });
    },
    // 弹出关联会员
    switchMember(actionType) {
      this.actionType = actionType;
      this.openMemberDialog = true;
    },
    // 商品模式切换
    switchGoodMode(mode) {
      this.$cache.local.set("goodsMode", mode);
      this.goodsMode = mode;
      let size = 15;
      if (mode == "big") {
        size = 9;
      }
    },
    // 确认关联会员
    doSwitchMember(memberInfo) {
      this.openMemberDialog = false;
      if (memberInfo != 0) {
        this.memberInfo = memberInfo;
        if (this.memberInfo) {
          setUserId(memberInfo.vipUserId);
          // 切换为非vip后
          updateCartVip({
            vipUserId: memberInfo.vipUserId,
          }).then(() => {
            this.getCartList();
          });
        } else {
          removeUserId();
          // 切换为非vip后
          updateCartVip({ vipUserId: "" }).then(() => {
            this.getCartList();
          });
        }
      }
    },
    addhMember() {},
    // 退出登录
    logout() {
      this.$router.push("/");
    },
    // 发起结算
    doSettlement() {
      const app = this;
      if (this.cartList.length < 1) {
        this.$alert("请先添加结算商品！");
        return false;
      }
      this.orderInfo = {};
      if (app.loading) {
        return false;
      }
      this.openSettlementDialog = true;
    },
    // 无商品结算
    doCashier() {
      this.orderInfo = {};
      this.openNoGoodsCashierDialog = true;
    },
    // 提交结算
    submitCashier(param) {
      this.orderInfo = {};
      this.openSettlementDialog = true;
      this.cartTotalPrice = parseFloat(param.amount);
      this.cartRemark = param.remark;
      this.openNoGoodsCashierDialog = false;
    },
    // 确认结算
    submitSettlement(param) {
      const app = this;
      if (app.loading) {
        return false;
      }
      app.loading = true;
      submitOrder({
        cartId: 0,
      })
        .then((response) => {
          if (response.errno) {
            app.loading = false;
            app.$alert(response.errmsg);
            return;
          }
          app.loading = false;
          app.doSwitchMember(null);
          app.initGoodsList();
          app.getCartList();
          app.openSettlementDialog = false;
          app.showPayResult({
            isSuccess: true,
            payAmount: response.data.orderInfo.payAmount,
            orderId: response.data.orderInfo.id,
          });
        })
        .catch((err) => {
          app.loading = false;
          console.log(err.toString());
        });
    },
    // 关闭对话框
    closeDialog(dialog) {
      if (dialog == "settlementDialog") {
        this.openSettlementDialog = false;
        // } else if (dialog == "scanPayCodeDialog") {
        //   this.openScanPayCodeDialog = false;
        // } else if (dialog == "payResultDialog") {
        //   this.openPayResultDialog = false;
      } else if (dialog == "printOrder") {
        this.openOrderPrintDialog = false;
      } else if (dialog == "openNoGoodsCashierDialog") {
        this.openNoGoodsCashierDialog = false;
      }
    },
    // 展示支付结果
    // showPayResult(payResult) {
    //   this.payResult = payResult;
    //   this.openPayResultDialog = true;
    // },

    // 打印小票
    showOrderPrint(orderId) {
      const app = this;
      getOrderInfo({
        orderId: orderId,
      })
        .then((response) => {
          if (response.data.orderInfo) {
            app.orderInfo = response.data.orderInfo;
            app.openOrderPrintDialog = true;
          }
        })
        .catch((err) => {
          app.loading = false;
          console.log(err.toString());
        });
    },
    // 确认关闭
    handleClose() {
      return false;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/variables.scss";
.cashier-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;

  .pagination {
    position: fixed;
    bottom: 10px;
    height: 50px;
    min-width: 750px;
    line-height: 50px;
    right: 10px;
    margin-top: 10px;
    display: block;
    background-color: $blue;
    color: #ffffff;
    border-radius: 5px;
    z-index: 99999;
  }

  .cart-container {
    width: 700px;
    height: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    left: 165px;
    top: 0px;
    overflow-x: hidden;
    overflow-y: auto;
    border: #cccccc solid 1px;

    .title {
      height: 70px;
      background: $blue;
      border-bottom: #cccccc 2px solid;
      color: #ffffff;
      padding-top: 16px;
      padding-left: 1px;
      display: block;
      z-index: 999;
      clear: both;

      .logo {
        float: left;
        font-size: 24px;

        .avatar {
          width: 30px;
          height: 30px;
          border-radius: 40px;
          margin: 5px 0px 5px 5px;
        }
      }

      .member-info {
        float: left;
        margin-top: 5px;

        .name {
          margin-left: 2px;
          margin-right: 3px;
        }

        .none {
          margin-left: 2px;
          margin-right: 5px;
          font-size: 13px;
        }

        .switch {
          padding: 8px 8px 8px 4px;
        }
      }
    }

    .carts {
      flex-grow: 1;
      color: #666666;
      padding: 0px;
      overflow: auto;
      scrollbar-width: none;

      .tab {
        width: 50%;

        .cart-list {
          margin-bottom: 60px;

          .cart-item {
            border-bottom: dashed 1px #cccccc;
            height: 110px;
            width: 310px;
            padding-top: 5px;

            .image {
              width: 50px;
              height: 50px;
              margin-left: 5px;
              border-radius: 5px;
              border: solid 1px #ccc;
              float: left;
              margin-top: 20px;
            }

            .info {
              float: left;
              padding-left: 5px;
              margin-top: 5px;

              .name {
                font-weight: bold;
                font-size: 12px;
                width: 150px;
                max-height: 30px;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
              }

              .spec {
                font-size: 12px;
                width: 160px;
                height: 20px;
                margin-top: 2px;

                .item {
                  margin-right: 2px;
                  border-radius: 5px;
                  text-align: center;
                  max-width: 50px;
                  height: 20px;
                  line-height: 20px;
                  float: left;
                  display: block;
                  overflow: hidden;
                  color: #606266;
                  cursor: pointer;
                  background: #cceeee;
                  padding: 0px 3px 0px 3px;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
              }

              .input {
                width: 120px;
                margin-top: 2px;
              }
            }

            .option {
              float: right;
              text-align: right;
              margin-right: 20px;

              .remove {
                margin-top: 10px;
                font-size: 18px;
                cursor: pointer;
              }

              .total {
                margin-top: 10px;
                font-size: 16px;
                color: #ff5b57;
              }
            }
          }
        }

        .empty {
          margin-top: 200px;
          width: 310px;
        }
      }
    }

    .footer {
      background-color: $blue;
      bottom: 0;
      height: 120px;
      padding-top: 5px;
      padding-right: 15px;
      color: #ffffff;
      border: solid 3px #cccccc;

      .number {
        float: right;
        margin: 5px;
        font-size: 13px;

        .total-price {
          margin-top: 3px;

          .num {
            color: #ff5b57;
            font-size: 20px;
          }
        }
      }

      .options {
        text-align: center;
        cursor: pointer;
        float: right;
        color: #ffffff;

        .cash {
          float: left;
          height: 50px;
          border: solid 1px #00acac;
          padding-top: 15px;
          width: 135px;
          border-radius: 5px;
          background: #00acac;
          font-weight: bold;
        }

        .submit {
          float: left;
          height: 50px;
          border: solid 1px #ff5b57;
          margin-left: 10px;
          padding-top: 15px;
          width: 135px;
          border-radius: 5px;
          background: #ff5b57;
          font-weight: bold;
        }
      }
    }
  }

  .main-list {
    height: 100%;
    width: 100%;
    min-width: 760px;
    margin-right: 2px;
    overflow: auto;
    display: block;

    .title {
      position: fixed;
      height: 106px;
      width: calc(100% - 465px);
      min-width: 700px;
      background: #ffffff;
      padding: 5px;
      color: red;
      top: 0px;

      .search-form {
        height: 50px;

        .form-item {
          margin-right: -2px;
        }

        .input-item {
          min-width: 456px;
        }

        .search-goods {
          height: 50px;
          background: #00acac;
          margin-left: 3px;
          color: #fff;
        }

        .setting {
          float: right;
          margin-right: 20px;

          .item {
            margin-left: 15px;
            color: #2b2f3a;
            cursor: pointer;
          }

          .active {
            font-weight: bold;
            color: #2b2f3a;
          }

          .icon {
            width: 14px;
            height: 14px;
            vertical-align: middle;
            margin-right: 2px;
          }

          .text {
            font-size: 14px;
            display: inline-block;
            vertical-align: middle;
          }
        }
      }

      .tab-box {
        margin-top: 3px;
        width: 100%;
      }
    }
    .goods-list {
      height: 100%;
      width: 100%;
      margin-top: 103px;
      margin-left: 2px;
      overflow: auto;
      scrollbar-width: none;
      margin-bottom: 70px;
      .goods-item {
        width: 20%;
        min-height: 100px;
        min-width: 100px;
        padding: 3px;
        float: left;
        background: #ffffff;
        text-align: left;
        cursor: pointer;
        .item {
          background: #ffffff;
          padding: 5px;
          border-radius: 5px;
          border: solid 1px #cccccc;
          margin: 0px;
          .goods-name {
            margin-top: 6px;
            font-size: 12px;
            color: #666666;
            height: 20px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .goods-price-list {
            font-size: 12px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            .bold {
              font-weight: bold;
            }
            .red {
              color: #ff5b57;
            }
            .gray {
              color: gray;
            }
            .line-through {
              text-decoration: line-through;
            }
          }
          .image {
            width: 100%;
            height: 120px;
            border-radius: 3px;
          }
        }
      }
    }
    .goods-list.big {
      display: block;
      .goods-item {
        width: 33.3%;
        min-height: 300px;
        min-width: 220px;
        // background: #ffffff;
        display: block;
        .item {
          .goods-name {
            margin-top: 10px;
            font-size: 18px;
            height: 30px;
          }
          .goods-price-list {
            font-size: 18px;
          }
          .image {
            height: 220px;
          }
        }
      }
    }
  }
}

.goods-info {
  border: solid 1px #ccc;
  padding: 30px;
  border-radius: 5px;

  .name {
    height: 40px;
    font-weight: bold;
    font-size: 20px;
  }

  .price {
    height: 40px;
    color: #ff5b57;
    font-size: 16px;
  }

  .spec-list {
    border: solid 1px #ccc;
    padding: 20px;
    margin-top: 10px;
    border-radius: 6px;

    .spec-item {
      margin-bottom: 20px;

      .spec-name {
        font-weight: bold;
        font-size: 16px;
      }

      .values {
        display: block;
        padding-top: 10px;
        margin-left: 0px;
        padding-left: 0px;
        font-size: 12px;

        .value {
          border: solid 1px #cceeee;
          margin-right: 10px;
          padding: 8px 15px 5px 15px;
          cursor: pointer;
          border-radius: 4px;
          background: rgba(0, 172, 172, 0.1);
          color: #666666;
        }

        .active {
          border: solid 1px #ff5891;
          background: #ff5b57;
          color: #ffffff;
        }
      }
    }
  }
}
</style>
<style scoped>
.input-item >>> .el-input__inner {
  border: #00acac solid 2px;
  line-height: 50px;
  height: 50px;
}

.form-item >>> .el-form-item__label {
  line-height: 50px;
  height: 50px;
}

.el-tabs--border-card {
  box-shadow: none;
  border: none;
}

::v-deep .el-tabs--border-card > .el-tabs__content {
  padding: 0px;
}

::v-deep .el-pagination.is-background span {
  color: #fff;
}
</style>
